import React, { Component, Fragment } from 'react'
import { BackTop } from 'antd'
import { connect } from 'react-redux'
import { actionCreater } from './store'
import Header from '../../common/header'
import Writer from './components/writer'
import { BoardWrapper, BoardLeft, BoardRight, BoardContent, LoadMore, List } from './style.js'
class Board extends Component{
    componentWillMount(){
        this.props.changeBoardData(this.props.match.params.id);
        // console.log(this.props.match.params.id)
        //this.props.match.params.id 为在路由传的参数
    }
    render(){
        const { articleList, page, getMoreList } = this.props;
        return(
            <Fragment>
               <Header></Header>
               <BoardWrapper>
               <BoardLeft>
               <img className= 'board-img' alt= '' src= "https://cdn2.jianshu.io/assets/web/seven-hot-344e8726a99ec07a8d552b33fe50be82.png" />
                {
                    articleList.map((items, index) => {
                        return (
                          <BoardContent key = {index}>
                            <img alt = '' className = 'content-img' src = {items.get('urlImg')} />
                           <List>
                            <h3 className = 'title'>{items.get('title')}</h3>
                            <p className = 'desc'>{items.get('desc')}</p>
                          </List>
                         </BoardContent>
                        )
                    })
                }
                <LoadMore onClick = {() => getMoreList(page)} >阅读更多</LoadMore>
              </BoardLeft>
              <BoardRight>
                <Writer></Writer>
              </BoardRight>
              <BackTop></BackTop> 
               </BoardWrapper>
            </Fragment>
        )
    }
}
const mapState = (state) => ({
    articleList: state.getIn(['board', 'articleList']),
    page: state.getIn(['board', 'articlePage'])
 })
 const mapDispatch = (dispatch) => ({
     getMoreList(page){
       dispatch( actionCreater.getMoreList(page))
     },
     changeBoardData(id){
         dispatch( actionCreater.getBoardDate(id))
     }

 })
export default connect(mapState, mapDispatch)(Board);